<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>图片剪裁</title> 
<link rel="stylesheet" href="imgcrop.css" />
<script type="text/javascript" src="jquery-1.10.2.min.js" ></script>
</head> 
<body> 
<div class="container">
    <div class="content">
        <header class="codrops-header">
            <h1>Image Resizing &amp; Cropping <br /><span>with Canvas</span></h1>
        </header>
        <div class="component">
            <div class="overlay">
                <div class="overlay-inner">
                </div>
            </div>
            <img class="resize-image" src="demos/demo_files/flowers.jpg" alt="image for resizing">
            <button class="btn-crop js-crop">Crop<img class="icon-crop" src="http://tympanus.net/Tutorials/ImageResizeCropCanvas/img/crop.svg">
            </button>
        </div>
        
    </div>
    <!-- /content -->
</div>
<!-- /container -->
</body> 
</html>
<script type="text/javascript" src="imgcrop.js" ></script>